

  <template>
  <ReportInfo />

  <!-- 搜索 -->
  <form class="d-flex">
    <input
      class="form-control me-4"
      type="search"
      placeholder="标题"
      v-model="keyWord"
    />
    <button class="btn btn-warning" type="button" @click="searchReport()">
      搜索
    </button>
  </form>

  <ReportCard />

  <!-- 公告的手风琴组件 -->
  <div class="accordion" id="accordionExample">
    <div class="accordion-item" v-for="(port, index) in reports" :key="port.id">
      <h2 class="accordion-header" :id="'heading' + index">
        <button
          class="accordion-button"
          type="button"
          data-bs-toggle="collapse"
          :data-bs-target="'#collapse' + index"
          aria-expanded="false"
          :aria-controls="'collapse' + index"
        >
          {{ port.title }}
        </button>
      </h2>
      <div
        :id="'collapse' + index"
        class="accordion-collapse collapse"
        :aria-labelledby="'heading' + index"
        data-bs-parent="#accordionExample"
      >
        <div class="accordion-body">
          {{ port.content }}
        </div>
      </div>
    </div>
  </div>

  <!-- 分页导航 -->
  <div class="fenye">
    <nav aria-label="Page navigation example">
      <ul class="pagination">
        <li class="page-item">
          <a class="page-link" href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item">
          <a class="page-link" href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</template>
   
<script>
import { http } from "../../utils/http.js";
import ReportCard from "./ReportCard.vue";
import ReportInfo from "./ReportInfo.vue";

export default {
  components: { ReportCard, ReportInfo },
  data() {
    return {
      // 从后台获取数据，这里先初始化为空数组
      reports: [],
      // title: '', // 如果不需要这个属性，可以移除
      keyWord: "",
    };
  },
  created() {
    fetch("http://localhost:8181/getBullentin")
      .then((resp) => resp.json())
      .then((data) => {
        this.reports = data;
        console.log(this.reports);
      })

      // .catch() 方法用于指定一个回调函数,发生错误时将数据传给他
      .catch((error) => {
        console.error("Error fetching data:", error);
      });
  },
  methods: {
    searchReport() {
      // 使用 ES6 模板字符串来构建 URL
      http
        .get(`/getBullentin?title=${this.keyWord}`)
        .then((res) => {
          // 假设服务器返回的数据结构与你之前的 reports 相同
          this.reports = res.data; // 更新搜索结果
        })
        .catch((error) => {
          console.error("Error fetching data:", error);
        });
    },
  },
};
</script>



<style scoped>
.accordion {
  width: 70%; /* 占据浏览器宽度的75% */
  align-items: center; /* 垂直居中 */
  margin: 0 auto; /* 水平居中 */
}

/* 手风琴 */
.accordion-collapse {
  border: 2px solid #ccc; /* 边框加粗且颜色为淡灰色 */
  /* 如果需要，你还可以添加其他样式，比如内边距、背景色等 */
  padding: 15px; /* 可选：添加一些内边距使内容更易读 */
  background-color: #dcd6d6;
}

/* 分页导航栏 */

.fenye {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 如果需要垂直居中，也加上这个 */
  height: 100px; /* 或者其他你需要的值，以便看到垂直居中的效果 */
}

.pagination {
  /* 清除默认的margin或padding，如果需要的话 */
  padding-left: 0;
}

/* 搜索 */
.d-flex {
  width: 80%; /* 占据浏览器宽度的75% */
  align-items: center; /* 垂直居中 */
  margin: 0 auto; /* 水平居中 */
  justify-content: right;
  margin-top: 10px; /*外边距  */
}
.form-control {
  width: 20%;
}
.btn {
  border-radius: 13%;
  width: 100px;
  margin-left: -10px;
}
</style>